<template>
  <div class="container" style="max-width: 600px; margin: 20px auto;">
    <h1>导入 Excel 数据</h1>
    <form class="well" enctype="multipart/form-data">
      <!-- 文件上传 -->
      <div class="form-group">
        <label for="excelFile" class="control-label">选择 Excel 文件</label>
        <input 
          type="file" 
          id="excelFile" 
          class="form-control" 
          accept=".xlsx" 
          :file-list="fileList" 
          @change="handleFileChange" 
          :limit="1" 
          @exceed="handleExceed" 
        >
      </div>
      <!-- 提示信息 -->
      <p class="text-muted">支持 xlsx 格式，最大文件大小：10MB</p>
      <p class="text-muted">请先下载模板并按照模板格式填写数据</p>
      <!-- 下载模板按钮 -->
      <a href="#" class="btn btn-primary" @click.prevent="downloadTemplate">下载模板</a>
      <!-- 导入按钮 -->
      <button 
        type="button" 
        class="btn btn-success" 
        style="background-color: #67c23a; border-color: #67c23a;" 
        @click="handleImport"
      >
        <i class="glyphicon glyphicon-ok"></i> 导入
      </button>
      <!-- 取消按钮 -->
      <a href="#" class="btn btn-info" @click.prevent="handleCancel">取消</a>
    </form>
  </div>
</template>

<script>
export default {
  data() {
    return {
      fileList: []
    };
  },
  methods: {
    handleFileChange(e) {
      // 处理文件选择变化逻辑，e.target.files 获取选择的文件
      const files = e.target.files;
      this.fileList = Array.from(files);
    },
    handleExceed() {
      // 超过文件数量限制的逻辑，比如提示用户
      alert('最多只能选择 1 个文件');
    },
    downloadTemplate() {
      // 这里写下载模板的逻辑，比如跳转下载链接
      window.location.href = '你的模板文件下载地址'; 
    },
    handleImport() {
      // 处理导入逻辑，比如获取 fileList 里的文件上传后端
      if (this.fileList.length > 0) {
        const formData = new FormData();
        formData.append('file', this.fileList[0]);
        // 调用接口上传文件，示例用 console 打印
        console.log('准备上传的文件：', formData.get('file'));
        // 实际可通过 axios 等发请求：
        // axios.post('你的上传接口', formData).then(...).catch(...)
      } else {
        alert('请选择要导入的文件');
      }
    },
    handleCancel() {
      // 取消操作逻辑，比如清空文件列表、跳转等
      this.fileList = [];
      // 若有路由跳转需求：this.$router.push('目标路径');
    }
  }
};
</script>

<style scoped>
/* 可自定义局部样式，这里主要用 Bootstrap 3 全局样式，若需要微调可加 */
</style>